<template>
  <div>
    <div class="sorder">
      <!-- 选择门店 -->
      <div class="sorder-1">
        <el-form label-width="80px">
          <el-form-item label="当前店铺">
            <el-select
              v-on:change="getData(str)"
              filterable
              v-model="str"
              placeholder="请选择店铺"
              style="width: 300px"
            >
              <el-option
                v-for="item in form"
                :key="item.aid"
                :label="item.offline_name"
                :value="item.offline_name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="sorder-2">
        <!-- 类别 -->
        <div class="sorder-2-1">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部" name="1"></el-tab-pane>
            <el-tab-pane label="待付款" name="2"></el-tab-pane>
            <el-tab-pane label="待出货" name="3"></el-tab-pane>
            <el-tab-pane label="运送中" name="4"></el-tab-pane>
            <el-tab-pane label="已完成" name="5"></el-tab-pane>
            <el-tab-pane label="已取消" name="6"></el-tab-pane>
            <el-tab-pane label="售后申请" name="7"></el-tab-pane>
          </el-tabs>
        </div>
        <!-- 搜索 -->
        <div class="sorder-2-2">
          <!-- <div class="sorder-2-2-1">
            <p>订单成立时间</p>
            <div>
              <el-date-picker
                v-model="value2"
                type="daterange"
                align="right"
                size="mini"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>
            <el-row>
              <el-button size="mini" @click="educe">导出</el-button>
            </el-row>
            <el-row>
              <el-button class="el-icon-s-operation" size="mini"></el-button>
            </el-row>
          </div> -->
          <div class="sorder-2-2-2" style="margin-top: 15px">
            <el-input
              placeholder="请输入内容"
              v-model="input3"
              class="input-with-select"
              style="width: 800px"
            >
              <el-select
                v-model="select"
                slot="prepend"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option label="用户姓名" value="1"></el-option>
                <el-option label="订单号" value="2"></el-option>
                <el-option label="用户电话" value="3"></el-option>
              </el-select>
              <el-button
                class="black"
                @click="getIndent(select)"
                slot="append"
                icon="el-icon-search"
              ></el-button>
            </el-input>
            <el-button class="black" @click="input3 = ''">重置</el-button>
          </div>
        </div>
        <!-- 商品订单 -->
        <div class="dd">
          <div class="sorder-2-3-1-2">
            <!-- 订单内容 -->
            <el-table :data="table" border style="width: 100%">
              <el-table-column label="用户" width="180">
                <template slot-scope="scope">
                  <div class="user">
                    <img :src="scope.row.pic" alt="" />
                    <span>{{ scope.row.uname }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="pid" label="订单详情" width="300">
                <template slot-scope="scope">
                  <div class="product">
                    <img :src="scope.row.cover" alt="" />
                    <span>x{{ scope.row.saleCount }}</span>
                    <div>
                      <p>
                        {{ scope.row.title }}
                      </p>
                      <span>规格{{ scope.row.modul }}</span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="金额" width="180">
                <template slot-scope="scope">
                  <span>
                    ￥{{ getPrice(scope.row.price, scope.row.saleCount) }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column v-if="quitState" label="退款状态">
                <template slot-scope="scope">
                  <span>
                    {{ scope.row.quit == 1 ? "已退款" : "已换货" }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column v-if="quitState" label="申请原因">
                <span> 买错了，不想要了 </span>
              </el-table-column>
              <el-table-column label="发货状态">
                <template slot-scope="scope">
                  <span>
                    {{ scope.row.delivery == 1 ? "已发货" : "未发货" }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="支付状态">
                <template slot-scope="scope">
                  <span>
                    {{ scope.row.payed == 1 ? "已支付" : "未支付" }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="id" label="订单编号"> </el-table-column>
              <el-table-column prop="birth_date" label="订单成立时间">
              </el-table-column>
              <!-- 操作 -->
              <el-table-column label="操作" width="340">
                <template slot-scope="scope">
                  <el-button
                    class="black"
                    v-show="addressState"
                    type="success"
                    size="small"
                    @click="deliver(scope.row.id, 1)"
                    >发货</el-button
                  >
                  <el-button
                    class="red"
                    type="warning"
                    size="small"
                    @click="deliver(scope.row.id, 2)"
                    >换货</el-button
                  >
                  <el-button
                    class="black"
                    v-show="addressState"
                    type="info"
                    size="small"
                    @click="deliver(scope.row.id, 3)"
                    >修改地址
                  </el-button>
                  <el-button
                    class="red"
                    type="danger"
                    size="small"
                    @click="deliver(scope.row.id, 4)"
                    >退款</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器********** -->
            <div class="block">
              <el-pagination
                v-model="indentData"
                background
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-size="3"
                :pager-count="5"
                layout="->,total, prev, pager, next"
                :total="indentData.total"
              >
              </el-pagination>
            </div>
            <!-- 操作发货 -->
            <el-dialog
              :close-on-click-modal="false"
              title="发货操作"
              :visible.sync="dialogFormVisible"
              width="500px"
            >
              <el-form ref="indentList" :rules="rules" :model="indentList">
                <el-form-item label="选择物流">
                  <el-select placeholder="请选择物流" v-model="selectAddr">
                    <el-option label="中通" value="0"></el-option>
                    <el-option label="圆通" value="1"></el-option>
                    <el-option label="极兔" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="发货单号" prop="odd">
                  <el-input
                    v-model="indentList.odd"
                    placeholder="请输入发货单号"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button class="black" @click="resetForm(indentList)"
                  >取 消</el-button
                >
                <el-button class="black" type="primary" @click="deliver1"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
            <!-- 操作换货 -->
            <el-dialog
              :close-on-click-modal="false"
              title="换货操作"
              :visible.sync="dialogFormVisible1"
              width="500px"
            >
              <el-form>
                <el-form-item label="更换规格">
                  <el-select placeholder="请选择产品规格" v-model="selectType">
                    <el-option label="#N15" value="#N15"></el-option>
                    <el-option label="#N16" value="#N16"></el-option>
                    <el-option label="#N17" value="#N17"></el-option>
                    <el-option label="#N18" value="#N18"></el-option>
                    <el-option label="#N19" value="#N19"></el-option>
                    <el-option label="#N20" value="#N20"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button class="black" @click="resetForm(indentList)"
                  >取 消</el-button
                >
                <el-button class="black" type="primary" @click="exchange"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
            <!-- 修改地址 -->
            <el-dialog
              :close-on-click-modal="false"
              title="修改地址"
              :visible.sync="dialogFormVisible2"
              width="500px"
            >
              <el-form>
                <el-form-item label="收货地址" prop="address">
                  <el-input
                    v-model="indentList.odd"
                    placeholder="请输入收货地址"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button class="black" @click="resetForm(indentList)"
                  >取 消</el-button
                >
                <el-button class="black" type="primary" @click="address"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
            <!-- 退款申请 -->
            <el-dialog
              :close-on-click-modal="false"
              title="退款操作"
              :visible.sync="dialogFormVisible3"
              width="500px"
            >
              <el-form>
                <el-form-item label="退款操作">
                  <el-select
                    placeholder="请选择产品规格"
                    v-model="selectRefund"
                  >
                    <el-option label="退货退款" value="#N15"></el-option>
                    <el-option label="未发货退款" value="#N16"></el-option>
                    <el-option label="仅退款" value="#N17"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button class="black" @click="resetForm(indentList)"
                  >取 消</el-button
                >
                <el-button class="black" type="primary" @click="refund"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectAddr: "中通",
      selectType: "#N15",
      selectRefund: "退货退款",
      quitState: false,
      addressState: false,
      table: [],
      form: {},
      str: "MAC美妆(一号店)",
      activeName: "1",
      input1: "",
      input2: "",
      input3: "",
      select: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: "",
      indentData: {
        page: 1,
        pagesize: 3,
        total: 0,
      },
      userData: {},
      userList: [],
      productData: {},
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogTableVisible1: false,
      dialogFormVisible1: false,
      dialogTableVisible2: false,
      dialogFormVisible2: false,
      dialogTableVisible3: false,
      dialogFormVisible3: false,
      indentList: {}, //订单数据
      rules: {
        odd: [{ required: true, message: "请输入单号", trigger: "blur" }],
      },
    };
  },

  methods: {
    // 计算价格方法
    getPrice(price, count) {
      let r = price.indexOf("￥") > -1 ? price.split("￥")[1] : price;
      return r * count;
    },
    // 通过门店选择订单
    getData() {
      this.$http.storeApi
        .queryLikeName({ offline_name: this.str })
        .then((res) => {
          let aid = res.data.data[0].aid;
          this.$http.orderApi.queryByAid({ aid }).then((res) => {
            this.table = res.data.res;
          });
        });
    },
    // 选择搜索发请求查询订单
    getIndent(value) {
      if (value == 1) {
        let params = { uname: this.input3, page: 1, pagesize: 2 };
        this.$http.userApi.queryLikeName(params).then((res) => {
          this.userList = res.data.data;
          this.userList.forEach((item) => {
            this.$http.orderApi.queryByUid({ uid: item.uid }).then((res) => {
              this.table = res.data.res;
            });
          });
        });
      } else if (value == 2) {
        this.$http.orderApi.queryByOdd({ odd: this.input3 }).then((res) => {
          // console.log(res, "555555");
          this.table = res.data.res;
        });
      } else if (value == 3) {
        let params = { phone: this.input3 };
        this.$http.userApi.queryByPhone(params).then((res) => {
          console.log(res);
          this.userData = res.data.data;
          this.$http.orderApi
            .queryByUid({ uid: this.userData.uid })
            .then((res) => {
              this.table = res.data.res;
            });
        });
      }
    },
    // 导出订单*********
    educe() {
      console.log(this.value2);
    },
    // 弹框
    deliver(id, number) {
      if (number == 1) {
        this.dialogFormVisible = true;
      } else if (number == 2) {
        this.dialogFormVisible1 = true;
      } else if (number == 3) {
        this.dialogFormVisible2 = true;
      } else if (number == 4) {
        this.dialogFormVisible3 = true;
      }
      this.$http.orderApi.queryById({ id }).then((res) => {
        console.log(res, "单条");
        this.indentList = res.data.res[0];
        this.indentList.odd = "";
      });
    },
    // 发货请求
    deliver1() {
      this.$refs["indentList"].validate((valid) => {
        if (valid) {
          this.indentList.delivery = 1;
          // console.log(this.selectAddr);
          this.indentList.expressage = this.selectAddr;
          this.$http.orderApi.update(this.indentList).then((res) => {
            if (res.data.code == 200) {
              this.$message({ type: "success", message: "发货成功" });
              this.dialogFormVisible = false;
              this.$http.orderApi
                .queryByDelivery({ delivery: 0 })
                .then((res) => {
                  // console.log(res, "未发货订单");
                  this.indentData = res.data;
                  this.table = res.data.res;
                  this.quitState = false;
                  this.addressState = true;
                });
            } else {
              this.$message({ type: "error", message: "发货失败，请检查信息" });
            }
          });
        }
      });
    },
    // 换货请求************还有分页
    exchange() {
      this.$message({ type: "success", message: "换货成功" });
      this.dialogFormVisible1 = false;
    },
    // 修改地址请求*********
    address() {
      this.$message({ type: "success", message: "地址修改成功" });
      this.dialogFormVisible2 = false;
    },
    // 退款请求*******
    refund() {
      this.$message({ type: "success", message: "退款成功" });
      this.dialogFormVisible3 = false;
    },
    // 重置表单
    resetForm(indentList) {
      this.dialogFormVisible = false;
      this.dialogFormVisible1 = false;
      this.dialogFormVisible2 = false;
      this.dialogFormVisible3 = false;
      this.$refs["indentList"].resetFields();
    },
    // 点击标签后发请求
    handleClick(tab, event) {
      if (tab.index == 1) {
        this.$http.orderApi.queryByPayed({ payed: 0 }).then((res) => {
          // console.log(res, "未付款订单");
          this.indentData = res.data;
          this.table = res.data.res;
          this.quitState = false;
          this.addressState = false;
        });
      } else if (tab.index == 2) {
        this.$http.orderApi.queryByDelivery({ delivery: 0 }).then((res) => {
          // console.log(res, "未发货订单");
          this.indentData = res.data;
          this.table = res.data.res;
          this.quitState = false;
          this.addressState = true;
        });
      } else if (tab.index == 3) {
        this.$http.orderApi.queryByDelivery({ delivery: 1 }).then((res) => {
          // console.log(res, "运送中订单");
          this.indentData = res.data;
          this.table = res.data.res;
          this.quitState = false;
          this.addressState = false;
        });
      } else if (tab.index == 4) {
        this.$http.orderApi.queryByReceived({ received: 1 }).then((res) => {
          // console.log(res, "已完成订单");
          this.indentData = res.data;
          this.table = res.data.res;
          this.quitState = false;
          this.addressState = false;
        });
      } else if (tab.index == 5) {
        this.$http.orderApi.queryByQuit({ quit: 1 }).then((res) => {
          // console.log(res, "已取消订单");
          this.indentData = res.data;
          this.table = res.data.res;
          this.addressState = false;
          this.quitState = true;
        });
      } else if (tab.index == 6) {
        this.$http.orderApi.queryByQuit({ quit: 1 }).then((res) => {
          // console.log(res, "售后申请");
          this.indentData = res.data;
          this.table = res.data.res;
          this.addressState = false;
          this.quitState = true;
        });
      }
    },
    // 请求所有店铺列表
    getStore() {
      this.$http.storeApi.queryAll().then((res) => {
        this.form = res.data.data;
      });
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.indentData.page = val;
      this.getOrder();
      // this.getData();
    },
  },
  mounted() {
    this.getStore();
    // this.getOrder();
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
* {
  user-select: none;
}

ul,
ol {
  list-style: none;
}

.sorder {
  width: 100%;
  height: 760px;

  .sorder-1 {
    width: 100%;
    border: 1px solid rgba(214, 210, 210, 0.5);
    padding: 20px 0 0 0;
    background: #fff;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  }

  .sorder-2 {
    width: 100%;
    height: 80%;

    .sorder-2-1 {
      // margin-bottom: 20px;
      padding: 5px;
      padding-right: 50px;
    }

    .sorder-2-2 {
      .sorder-2-2-1 {
        height: 40px;
        // margin-left: 60%;
        display: flex;
        line-height: 40px;
      }
    }

    .sorder-2-2-2 {
      display: flex;
      margin: 0 0 20px 0;
    }

    .sorder-2-3-1-2 {
      width: 100%;
    }
  }
}

// 商品列表样式
.product {
  display: flex;
  // justify-content: space-between;
  // color: red;
  position: relative;
  > img {
    display: block;
    width: 50%;
    // height: 100px;
  }

  > span {
    position: absolute;
    top: 0;
    right: 0;
    // color:red;
  }

  > div {
    padding: 20px 25px 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    > p {
      letter-spacing: 0;
      overflow: hidden;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      /*要显示的行数*/
      -webkit-box-orient: vertical;
    }
  }
}

.user {
  display: flex;
  flex-direction: column;
  text-align: center;
  > img {
    height: 180px;
  }
}
.black {
  background: #010101 !important;
  border-color: #010101 !important;
  color: #fff;
}
.red {
  background: #9c1d12 !important;
  border-color: #9c1d12 !important;
  color: #fff;
}
</style>
